<template>
  <div style="height: 100%" class="workspace">
    <el-container ref="listWarp" style="height: 100%; background-color: #fff">
      <el-header
        class="toolbar-wap"
        style="height: 45px; background-color: #fff"
      >
        <el-tabs
          style="background-color: #fff"
          v-model="activeName"
          @tab-click="handleClick"
        >
          <el-tab-pane label="我的监督" name="first"></el-tab-pane>
          <el-tab-pane label="我的报修" name="second"></el-tab-pane>
          <el-tab-pane label="我的申请" name="third"></el-tab-pane>
          <el-tab-pane label="我的办公用房" name="fourth"></el-tab-pane>
        </el-tabs>
      </el-header>
      <el-main style="height: 100%; padding: 3px 15px" class="page-main">
        <div style="width: 100%" v-show="activeName == 'first'">
          <mySupervision ref="super"></mySupervision>
        </div>
        <div style="width: 100%" v-show="activeName == 'second'">
          <meRepair ref="repair"></meRepair>
        </div>
        <!-- <div style="width:100%" v-if="activeName=='third'">
          <mePublish></mePublish>
        </div>-->
        <div style="width: 100%; height: 100%" v-if="activeName == 'fourth'">
          <meReview></meReview>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import meRepair from "@/views/home/meRepair/index";
import mySupervision from "@/views/home/mySupervision/index";
import mePublish from "@/views/home/mePublish/index";
import meReview from "@/views/home/meReview/index";
export default {
  components: {
    mySupervision,
    meRepair,
    mePublish,
    meReview,
  },
  data() {
    return {
      activeName: "first",
      activeComm: "1",
    };
  },
  methods: {
    handleClick(tab, event) {
      if (this.activeName == "second") {
        this.$refs.repair.isFlag = true;
      }
      if (this.activeName == "first") {
        this.$refs.super.isFlag = true;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.workspace {
  ::v-deep .el-tabs__active-bar {
    background-color: #fff !important;
  }

  ::v-deep .el-tabs__nav-wrap::after {
    display: none;
  }
}

.toolbar-wap {
  padding: 0;

  ::v-deep .el-tabs__nav-scroll {
    // background-color: #fff;
  }
}

.page-main {
  ::v-deep .el-tabs__nav-scroll {
    background-color: #fff;
  }
}
</style>
